<template>
	<view class="containerbox">
		<view class="relative w-full" style="position: absolute">
			<view class="w-full">
				<image :src="deviceTypeData === 'pad' ? props.padbgsrc : props.bgsrc" class="w-full" mode="widthFix"></image>
			</view>
			
			<view class="header_centent absolute">
				<bar v-if="!$slots.navbar" />
				<slot name="navbar" />
				<view class="px-30">
					<slot name="title" />
				</view>
			</view>
		</view>
		
		<scroll-view class="containerbox" :scroll-y="scrollY">
			<slot />
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { imgPath } from '@/common/config.js'
	import { computed } from 'vue'
	
	import bar from './statusBar.vue'
	
	type Num = number | string
	const props = withDefaults(defineProps<{
		headerBgHeight?: Num,
		cententMarginTop?: Num,
		bgsrc?: string,
		padbgsrc?: string,
		scrollY?: boolean
	}>(),{
		headerBgHeight: 400,
		cententMarginTop: -96,
		bgsrc: imgPath + 'home/BG.png',
		padbgsrc: imgPath + 'home/padBG.png',
		scrollY: false
	})
	
	const computedBgRpx = computed(() => {
		const height = props.headerBgHeight.toString()
		if (height.includes('rpx')) return { height }
		else return { height: `${height}rpx` }
	})
	let { statusBarHeight, platform, deviceType } = uni.getSystemInfoSync()
	const statusBarHeightData = statusBarHeight
	const deviceTypeData = deviceType
	
		
	const computedTopRpx = computed(() => {
		const marginTop = props.cententMarginTop.toString()
		console.log('高度：', marginTop)
		// console.log(uni.getSystemInfoSync())
		console.log('状态栏和设备：', statusBarHeight, platform)
		if(deviceType === 'pad'){
			
		}
		let result = platform === 'ios' ? 0 : statusBarHeight
		if (marginTop.includes('rpx')){
			console.log(`结果1:${parseInt(marginTop.slice(0, -3)) - result}rpx`)
			return { marginTop: `${parseInt(marginTop.slice(0, -3)) - result}rpx` }
		}
		else {
			console.log(`结果2:${parseInt(marginTop) - result}rpx`)
			return { marginTop: `${parseInt(marginTop) - result}rpx` }
		}
		
	})
	
</script>

<style scoped lang="scss">
	.absolute{position: absolute;top: 0;bottom: 0;left: 0;right: 0}
</style>